<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <input type="text" v-model="name">
    <br>
    <!--下拉框-->
    <select v-model="sex">
        <option value="1">男</option>
        <option value="2">女</option>
    </select>
    <br>
    <!--多选框-->
    <input type="checkbox" value="篮球" v-model="likes">篮球
    <input type="checkbox" value="羽毛球" v-model="likes">羽毛球
    <input type="checkbox" value="足球" v-model="likes">足球
    <br>
    <!--文本域-->
    <textarea cols="30" rows="10" v-model="desc">

    </textarea>
    <br>
    <input type="button" value="提交" v-on:click="add">

</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    /*属性在data中定义*/

   /*方法在method定义*/
   var vm = new Vue({
       el:"#app",   //el，element：即要渲染的页面元素
       data:{
           name:"刘德华",
           sex:1,
           likes:[],
           desc:"desc"
       },
       methods:{
           add:function () {
               console.log(this.name);
               console.log(this.sex);
               console.log(this.likes);
               console.log(this.desc);
           }
       }
   });
</script>
</body>
</html>